<template>
  <div>
    <card :width="1400" class="box" style="margin: 24px auto 0 auto">
      <div style="padding-top: 20px" v-show="checkType == '我的课程'">
        <!-- 顶部 -->
        <div class="top flexBet">
          <div class="bgbtn rela shou" @click="courseTypeDialog = true">
            <div class="btn flex">
              <img src="@/assets/images/add1.png" alt="加载失败"/>
              创建课程
            </div>
            <img
              class="btnbg absolute"
              src="@/assets/images/btnbg.png"
              alt="加载失败"
            />
          </div>
          <el-dialog
            style="margin-top: 15vh"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            title="选择课程模板"
            :visible.sync="courseTypeDialog"
            width="680px"
            @close="courseTypeDialog = false"
          >
            <div class="course_create_type">
              <div @click="routeToAddCourse(1)" class="type_left">
                <div class="work_together_icon">
                  <img
                    class="img"
                    src="@/assets/images/work_together_icon.png"
                    alt="加载失败"
                  />
                </div>
                <div class="text">工学一体化课程模板</div>
              </div>
              <div @click="routeToAddCourse(0)" class="type_right">
                <div class="work_together_icon">
                  <img
                    class="img"
                    src="@/assets/images/commin_icon.png"
                    alt="加载失败"
                  />
                </div>
                <div class="text">通用模板</div>
              </div>
            </div>
          </el-dialog>
          <div>
            <el-input
              style="width: 320px"
              placeholder="请输入课程名称"
              suffix-icon="el-icon-search"
              v-model="queryParams.courseName"
              @change="getList(3, true)"
              @keyup.enter.native="getList(3, true)"
            >
            </el-input>
          </div>
        </div>
        <!-- 列表 -->
        <div class="list flex">
          <div class="flexBet" style="width: 100%">
            <div class="title_use">正式课</div>
            <el-select
              @change="filterList(2)"
              style="width: 120px; margin: 16px 40px 0 0"
              v-model="queryParams.status2"
              placeholder="状态"
              clearable
            >
              <el-option label="全部" :value="null"/>
              <el-option label="使用中" value="course0"/>
              <el-option label="已停用" value="course1"/>
            </el-select>
          </div>

          <div class="flex" v-if="courseList.length > 0">
            <courseItem
              @refresh="getList(2)"
              v-for="(item, index) in courseList"
              :key="index"
              :item="item"
              :type="queryParams.status2"
            ></courseItem>
          </div>
          <div
            v-else
            style="
              margin-bottom: 37px;
              width: 100%;
              height: 130px;
              display: flex;
              justify-content: center;
              transform: scale(0.8);
            "
          >
            <el-empty description="暂无课程~" style=""></el-empty>
          </div>
          <div class="flexBet" style="width: 100%">
            <div class="title_use">草稿箱</div>
            <el-select
              @change="filterList(1)"
              style="width: 120px; margin: 16px 40px 0 0"
              v-model="queryParams.status1"
              placeholder="状态"
              clearable
            >
              <el-option label="全部" :value="null"/>
              <el-option label="待提交" value="temporary2"/>
              <el-option label="待审核" value="temporary3"/>
              <el-option label="已驳回" value="temporary4"/>
              <el-option label="已审核" value="temporary0"/>
            </el-select>
          </div>

          <div class="flex" v-if="temporaryList.length > 0">
            <courseItem
              @refresh="getList(3)"
              v-for="(item, index) in temporaryList"
              :key="index"
              :item="item"
              :type="queryParams.status1"
            ></courseItem>
          </div>
          <div
            v-else
            style="
              margin-bottom: 37px;
              width: 100%;
              height: 200px;
              transform: scale(0.8);
              display: flex;
              justify-content: center;
            "
          >
            <el-empty description="暂无草稿~" style=""></el-empty>
          </div>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
import { getTeaCourseList } from '@/api/course/course'
import courseItem from '@/components/courseItem.vue'
import schoolCourse from '@/views/schoolCourse/schoolCourse'

export default {
  name: 'allCourse',
  components: { courseItem, schoolCourse },
  dicts: ['sys_teause_type'],
  data() {
    return {
      checkType: '我的课程',
      courseTypeDialog: false,
      queryParams: {
        status1: '',
        status2: '',
        courseName: ''
      },
      teaCourseObj: {
        course0: '1',
        course1: '2',
        temporary0: '5',
        temporary2: '3',
        temporary3: '4',
        temporary4: '6'
      },
      list: [],
      courseList: [],
      temporaryList: [],
      page: 1,
      size: 12,
      loadmore: false
    }
  },
  created() {
  },
  mounted() {
    this.getList(3, true)
    // 第一次进入页面 存入缓存列表
    if (this.$store.getters.keepTab.indexOf(this.$route.name) == -1) {
      this.$store.dispatch('SetKeepTab', [this.$route.name])
    }
  },
  watch: {},
  methods: {
    // 创建课程确认按钮
    routeToAddCourse(modelType) {
      this.$router.push({
        path: '/course/add',
        query: {
          type: 'add',
          modelType
        }
      })
    },
    filterList(type) {
      if (type == 1) {
        let status = this.queryParams.status1
        if (this.queryParams.status1 == 'temporary2') {
          status = 2
        } else if (this.queryParams.status1 == 'temporary3') {
          status = 3
        } else if (this.queryParams.status1 == 'temporary4') {
          status = 5
        } else if (this.queryParams.status1 == 'temporary0') {
          status = 0
        } else {
          status = null
        }
        console.log(this.queryParams.status1, status)
        if (status || status == 0) {
          this.temporaryList = this.list.filter((item) => {
            return item.status == status && item.temporaryState == 0
          })
        } else {
          this.temporaryList = this.list.filter((item) => {
            return item.temporaryState == 0
          })
        }
      }
      if (type == 2) {
        let status =
          this.queryParams.status2 == 'course0'
            ? 0
            : this.queryParams.status2 == 'course1'
              ? 1
              : null

        if (status || status == 0) {
          this.courseList = this.list.filter((item) => {
            return item.status == status && item.temporaryState == 1
          })
        } else {
          this.courseList = this.list.filter((item) => {
            return item.temporaryState == 1
          })
        }
      }
    },
    // 获取工作站列表
    async getList(type, e) {
      if (type == 1) {
        this.temporaryList = []
      }
      if (type == 2) {
        this.courseList = []
      }
      if (type == 3) {
        this.temporaryList = []
        this.courseList = []
      }

      if (e) {
        this.page = 1
      }
      let res
      let query = {
        courseName: this.queryParams.courseName
        // status: this.teaCourseObj[this.queryParams["status" + type]],
      }
      res = await getTeaCourseList(query)
      this.list = res.data
      if (type == 1) {
        this.filterList(1)
      }
      if (type == 2) {
        this.filterList(2)
      }
      if (type == 3) {
        this.filterList(1)
        this.filterList(2)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.top {
  padding: 15px 40px 0 40px;
  height: 66px;
}

.schoolCourse {
  width: 100%;
  height: calc(100vh - 135px);
  overflow: auto;
}

.box {
  .check_box {
    width: 100%;
    padding: 35px 40px 0 40px;
    box-sizing: border-box;
  }

  .list::-webkit-scrollbar {
    display: none;
  }

  .list {
    box-sizing: border-box;
    padding-left: 40px;
    overflow: auto;
    max-height: calc(100vh - 270px);
  }
}

.title_use {
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  color: #3a3a3a;
  width: 100%;
  margin: 20px 0;
}

.course_create_type {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 29px;
  box-sizing: border-box;

  .type_left {
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 284px;
    background: #fafafa;
    border: 1px solid #ebebeb;

    .work_together_icon {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #44b4ae;

      .img {
        width: 94px;
        height: 92px;
        border: 1px solid #d7d7d7;
      }
    }

    .text {
      width: 100%;
      height: 79px;
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .type_right {
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 284px;
    background: #fafafa;
    border: 1px solid #ebebeb;

    .work_together_icon {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f7ab04;

      .img {
        width: 94px;
        height: 92px;
        border: 1px solid #d7d7d7;
      }
    }

    .text {
      width: 100%;
      height: 79px;
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
